<template>
  <el-container style="height: 535px;padding: 10px">
    <el-table :data="tableData" @filter-change="filterChange" max-height="600">
      <el-table-column prop="acc" label="预约账号" width="120" fixed>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="date" label="出生日期" width="150">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="80">
      </el-table-column>
      <el-table-column prop="academy.name" label="所在学院" width="250"
                       :filters="getAcademyFilter()"
                       column-key="filterAcademy">
      </el-table-column>
      <el-table-column prop="specialized.name" label="所学专业" width="180"
                       :filters="getSpecializedFilter()"
                       column-key="filterSpecialized">
      </el-table-column>
      <el-table-column prop="szbj" label="所在班级" width="120">
      </el-table-column>
      <el-table-column prop="nj" label="年级" width="80">
      </el-table-column>
      <el-table-column prop="lxfs" label="手机号" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot:default="scope">
          <el-popconfirm confirm-button-text='好的'
                         cancel-button-text='不用了'
                         icon="el-icon-info"
                         icon-color="red"
                         @confirm="deleteRow(scope.$index, tableData)"
                         title="确定删除吗？">
            <el-button slot="reference" type="danger" size="mini">移除</el-button>
          </el-popconfirm>
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, tableData)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <StudentEdit ref="edit"></StudentEdit>
  </el-container>
</template>

<script>
import StudentEdit from './StudentEdit'

export default {
  name: 'StudentTable',
  components: {StudentEdit},
  data () {
    return {
      visible: false,
      tableData: [{
        id: '',
        acc: '',
        name: '',
        date: '',
        sex: '',
        academy: {
          id: '',
          name: ''
        },
        specialized: {
          id: '',
          name: ''
        },
        szbj: '',
        nj: '',
        lxfs: ''
      }]
    }
  },
  methods: {
    handleEdit (index, row) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.initDataForm = row.at(index)
    },
    deleteRow (index, rows) {
      this.visible = false
      this.$axios.get('admin/student_manager/' + rows.at(index).id + '/delete').then(resp => {
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
      rows.splice(index, 1)
    },
    getAcademyFilter () {
      let filterList = []
      this.$axios.get('admin/student_manager/academy/filter').then(resp => {
        for (let i = 0; i < resp.data.length; i++) {
          filterList.push({text: resp.data[i].academy.name, value: resp.data[i].academy.id})
        }
      }).catch(failResponse => {
      })
      return filterList
    },
    getSpecializedFilter () {
      let filterList = []
      this.$axios.get('admin/student_manager/specialized/filter').then(resp => {
        for (let i = 0; i < resp.data.length; i++) {
          filterList.push({text: resp.data[i].specialized.name, value: resp.data[i].specialized.id})
        }
      }).catch(failResponse => {
      })
      return filterList
    },
    filterChange (filterObj) {
      if (filterObj.filterAcademy === undefined) {
        // 对specialized
        if (filterObj.filterSpecialized.length === 1) {
          this.$axios.get('admin/student_manager/' + filterObj.filterSpecialized + '/specialized_info').then(resp => {
            this.tableData = resp.data
          }).catch(failResponse => {
          })
        } else if (filterObj.filterSpecialized.length === 0) {
          this.$axios.get('admin/student_manager/all-info').then(resp => {
            this.tableData = resp.data
          }).catch(failResponse => {
          })
        } else {
          this.tableData = []
          for (let i = 0; i < filterObj.filterSpecialized.length; i++) {
            this.$axios.get('admin/student_manager/' + filterObj.filterSpecialized[i] + '/specialized_info').then(resp => {
              this.tableData = this.tableData.concat(resp.data)
            }).catch(failResponse => {
            })
          }
        }
      } else {
        if (filterObj.filterAcademy.length === 1) {
          this.$axios.get('admin/student_manager/' + filterObj.filterAcademy + '/academy_info').then(resp => {
            this.tableData = resp.data
          }).catch(failResponse => {
          })
        } else if (filterObj.filterAcademy.length === 0) {
          this.$axios.get('admin/student_manager/all-info').then(resp => {
            this.tableData = resp.data
          }).catch(failResponse => {
          })
        } else {
          this.tableData = []
          for (let i = 0; i < filterObj.filterAcademy.length; i++) {
            this.$axios.get('admin/student_manager/' + filterObj.filterAcademy[i] + '/academy_info').then(resp => {
              this.tableData = this.tableData.concat(resp.data)
            }).catch(failResponse => {
            })
          }
        }
      }
    }
  },
  mounted () {
    this.$axios.get('admin/student_manager/all-info').then(resp => {
      this.tableData = resp.data
    }).catch(failResponse => {
    })
  }
}
</script>

<style scoped>
.el-container {
  padding: 20px 0;
  height: 200px;
  background-color: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>
